<template>
  <div>
    <brandhead></brandhead>
    <div class="brand-goods">
      <ul class="brandul">
        <li v-for="item in brandData" :key="item.productId" @click="handleDetail(item.productId,item)">
          <img :src="item.productImg" alt="">
          <p class="brand-title">{{ item.productTitle }}</p>
          <p class="brand-price">￥{{ item.sellPrice }}</p>
        </li>
      </ul>
    </div>
    <div class="no-brand">没有更多了</div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import brandhead from './brand/brandname'
import axios from 'axios'
export default {
  data () {
    return {
      brandData: [],
      currentPage: 1
    }
  },
  methods: {
    ...mapMutations('tabbar', ['hide', 'show']),
    handleDetail (goodsId, goods) {
      localStorage.setItem('goods', JSON.stringify(goods))
      this.$router.push(`/detail/${goodsId}`)
    }
  },
  mounted () {
    this.hide()
    axios.get('/brand/298/products?pageSize=10&currentPage=1&_=1583661873621').then(res => {
      this.brandData = res.data.data
    })
    window.onscroll = () => {
      if ((document.documentElement.scrollTop + document.documentElement.clientHeight) === document.documentElement.scrollHeight) {
        this.currentPage++
        axios.get(`/brand/298/products?pageSize=10&currentPage=${this.currentPage}&_=1583661873621`).then(res => {
          this.brandData = [...this.brandData, ...res.data.data]
        })
      }
    }
  },
  destroyed () {
    this.show()
    window.onscroll = null
  },
  components: {
    brandhead
  }
}
</script>

<style lang="scss" scoped>
img{
  width: 100%;
}
.brand-goods{
  background: white;
  .brandul{
    display: flex;
    flex-wrap: wrap;
    li:nth-child(2n-1){
      border-right:1px solid #f0f0f0
    }
    li{
      border-bottom: 1px solid #f0f0f0;
      width: 50%;
      padding:15px 10px 25px;
      box-sizing: border-box;
      .brand-title {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: gray;
        font-size: 14px;
      }
      .brand-price{
        font-size: 14px;
      }
    }
  }
}
.no-brand{
  background: white;
  font-size: 14px;
  padding: 15px;
  text-align: center;
}
</style>
